<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./assets/libs/layui/css/layui.css">
</head>
<body>
<div class="">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">流程</li>
            <li>流程绘制</li>
            <li>流程实例</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe style="width: 100%; min-height: 600px;" scrolling="no" frameborder="no" src="./page/process.html"></iframe>
            </div>
            <div class="layui-tab-item">
                <iframe style="width: 100%; min-height: 700px;" scrolling="no" frameborder="no" src="./page/dist/processEdit.html"></iframe>
            </div>
            <div class="layui-tab-item">
                <table id="table_process_instance"></table>
                <iframe style="width: 100%; min-height: 700px;" scrolling="no" frameborder="no" src="./page/processInstance.html"></iframe>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="./assets/libs/layui/layui.js"></script>
<script>
    layui.use(['element', 'table'], function(){
        var element = layui.element;
        var table = layui.table;

        table.render({
            elem: '#table_process_instance',
            url: '/processInstance/processInstances',
            cols: [[
                {type: 'numbers'},
                {title: 'ID', field: 'id'},
                {title: 'parent', field: 'parent'},
                {title: 'def_id', field: 'def_id'},
                {title: 'def_key', field: 'def_key'},
                {title: 'def_name', field: 'def_name'},
                {title: 'activity_id', field: 'activity_id'},
                {title: 'start_user', field: 'start_user'},
                {title: 'start_time', field: 'start_time'}
            ]]
        });
    });
</script>
</body>
</html>